/**
 * 天空盒面板UI生成器
 * 负责生成HTML结构和CSS样式
 */

export class SkyboxPanelUI {
    static generateHTML(presets) {
        return `
            <!-- 面板标题 -->
            <div class="panel-header">
                <span class="panel-title">🌅 天空盒设置</span>
                <button id="save-skybox" class="skybox-save-btn">💾 保存</button>
            </div>
            
            <!-- 面板内容 -->
            <div class="panel-body skybox-panel-body">
                <!-- 预设选择 -->
                <div class="skybox-section">
                    <h4>快速预设</h4>
                    <div class="skybox-presets">
                        ${Object.keys(presets).map(name => 
                            `<button class="skybox-preset-btn" data-preset="${name}">${name}</button>`
                        ).join('')}
                    </div>
                </div>
                
                <!-- 模式切换 -->
                <div class="skybox-section">
                    <h4>显示模式</h4>
                    <label class="skybox-checkbox">
                        <input type="checkbox" id="use-gradient" checked>
                        <span>使用渐变色模式</span>
                    </label>
                </div>
                
                <!-- 渐变色位置 -->
                <div class="skybox-section gradient-section">
                    <h4>渐变色位置</h4>
                    <div class="skybox-control">
                        <label>顶部位置</label>
                        <input type="range" id="top-line" min="-1" max="1" step="0.01" value="0.4">
                        <span class="value">0.4</span>
                    </div>
                    <div class="skybox-control">
                        <label>天际线位置</label>
                        <input type="range" id="skyline" min="-1" max="1" step="0.01" value="0">
                        <span class="value">0</span>
                    </div>
                    <div class="skybox-control">
                        <label>地面位置</label>
                        <input type="range" id="ground-line" min="-1" max="1" step="0.01" value="0">
                        <span class="value">0</span>
                    </div>
                    <div class="skybox-control">
                        <label>底部位置</label>
                        <input type="range" id="bottom-line" min="-1" max="1" step="0.01" value="-0.2">
                        <span class="value">-0.2</span>
                    </div>
                </div>
                
                <!-- 渐变色颜色 -->
                <div class="skybox-section gradient-section">
                    <h4>渐变色颜色 (颜色 + HDR强度)</h4>
                    <div class="skybox-color-group">
                        <div class="skybox-color-control">
                            <label>顶部天空</label>
                            <input type="color" id="top-color" value="#0060ff">
                            <input type="number" id="top-intensity" min="0" max="10" step="0.1" value="1.0" class="intensity-input" title="HDR强度">
                        </div>
                        <div class="skybox-color-control">
                            <label>中部天空</label>
                            <input type="color" id="middle-sky-color" value="#a1c8ff">
                            <input type="number" id="middle-sky-intensity" min="0" max="10" step="0.1" value="1.0" class="intensity-input" title="HDR强度">
                        </div>
                        <div class="skybox-color-control">
                            <label>天际线</label>
                            <input type="color" id="skyline-color" value="#34f6ff">
                            <input type="number" id="skyline-intensity" min="0" max="10" step="0.1" value="1.0" class="intensity-input" title="HDR强度">
                        </div>
                        <div class="skybox-color-control">
                            <label>地面</label>
                            <input type="color" id="ground-color" value="#fac89a">
                            <input type="number" id="ground-intensity" min="0" max="10" step="0.1" value="1.0" class="intensity-input" title="HDR强度">
                        </div>
                        <div class="skybox-color-control">
                            <label>底部</label>
                            <input type="color" id="bottom-color" value="#1a1313">
                            <input type="number" id="bottom-intensity" min="0" max="10" step="0.1" value="1.0" class="intensity-input" title="HDR强度">
                        </div>
                    </div>
                </div>
                
                <!-- 旋转贴图 -->
                <div class="skybox-section">
                    <h4>旋转贴图效果</h4>
                    <div class="skybox-control">
                        <label>纹理亮度</label>
                        <input type="range" id="rotate-tex-hdr" min="0" max="5" step="0.1" value="1.0">
                        <span class="value">1.0</span>
                    </div>
                    <div class="skybox-control">
                        <label>混合强度</label>
                        <input type="range" id="rotate-intensity" min="0" max="1" step="0.05" value="0.5">
                        <span class="value">0.5</span>
                    </div>
                    <div class="skybox-control">
                        <label>高度偏移</label>
                        <input type="range" id="height-offset" min="0" max="1" step="0.01" value="0.138">
                        <span class="value">0.138</span>
                    </div>
                    <div class="skybox-control">
                        <label>高度缩放</label>
                        <input type="range" id="height-scale" min="0" max="5" step="0.1" value="1">
                        <span class="value">1</span>
                    </div>
                    <div class="skybox-control">
                        <label>旋转速度</label>
                        <input type="range" id="rotate-speed" min="0" max="100" step="1" value="5">
                        <span class="value">5</span>
                    </div>
                    <div class="skybox-control">
                        <label>遮罩旋转速度</label>
                        <input type="range" id="mask-rotate-speed" min="0" max="100" step="1" value="1.5">
                        <span class="value">1.5</span>
                    </div>
                    <div class="skybox-texture-control">
                        <label>旋转贴图</label>
                        <input type="text" id="rotate-tex-name" placeholder="未选择贴图" readonly class="skybox-texture-input" />
                        <button class="skybox-select-texture-btn" data-texture-type="rotateTex">选择</button>
                        <button class="skybox-clear-texture-btn" data-texture-type="rotateTex">×</button>
                    </div>
                    <div class="skybox-texture-control">
                        <label>旋转遮罩</label>
                        <input type="text" id="rotate-mask-name" placeholder="未选择贴图" readonly class="skybox-texture-input" />
                        <button class="skybox-select-texture-btn" data-texture-type="rotateMaskTex">选择</button>
                        <button class="skybox-clear-texture-btn" data-texture-type="rotateMaskTex">×</button>
                    </div>
                </div>
                
                <!-- FlowMap -->
                <div class="skybox-section">
                    <h4>FlowMap效果</h4>
                    <label class="skybox-checkbox">
                        <input type="checkbox" id="use-flowmap">
                        <span>启用FlowMap</span>
                    </label>
                    <div class="skybox-control">
                        <label>Flow速度</label>
                        <input type="range" id="flow-speed" min="0" max="1" step="0.01" value="0.1">
                        <span class="value">0.1</span>
                    </div>
                    <div class="skybox-control">
                        <label>Flow强度</label>
                        <input type="range" id="flow-strength" min="0.1" max="1" step="0.01" value="0.25">
                        <span class="value">0.25</span>
                    </div>
                    <div class="skybox-texture-control">
                        <label>FlowMap贴图</label>
                        <input type="text" id="flowmap-name" placeholder="未选择贴图" readonly class="skybox-texture-input" />
                        <button class="skybox-select-texture-btn" data-texture-type="maskFlowMap">选择</button>
                        <button class="skybox-clear-texture-btn" data-texture-type="maskFlowMap">×</button>
                    </div>
                </div>
                
                <!-- 操作按钮 -->
                <div class="skybox-section">
                    <div class="skybox-actions">
                        <button id="reset-skybox" class="skybox-btn">🔄 重置</button>
                    </div>
                    <div id="skybox-save-status" class="skybox-save-status"></div>
                </div>
        `;
    }
    
    static generateCSS() {
        return `
            /* 标题栏保存按钮 */
            .panel-header {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 12px 15px;
            }
            
            .skybox-save-btn {
                padding: 6px 14px;
                background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                border: 1px solid #667eea;
                border-radius: 4px;
                color: white;
                cursor: pointer;
                font-size: 12px;
                font-weight: bold;
                transition: all 0.2s;
                white-space: nowrap;
            }
            
            .skybox-save-btn:hover {
                background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
                box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
                transform: translateY(-1px);
            }
            
            .skybox-save-btn.unsaved {
                animation: pulse 2s infinite;
            }
            
            @keyframes pulse {
                0%, 100% { box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.7); }
                50% { box-shadow: 0 0 0 6px rgba(102, 126, 234, 0); }
            }
            
            /* 天空盒面板内容样式 */
            .skybox-panel-body {
                overflow-y: auto;
                padding: 10px;
            }
            
            .skybox-section {
                margin-bottom: 20px;
                padding-bottom: 15px;
                border-bottom: 1px solid #444;
            }
            
            .skybox-section:last-child {
                border-bottom: none;
            }
            
            .skybox-section h4 {
                margin: 0 0 12px 0;
                color: #888;
                font-size: 13px;
                text-transform: uppercase;
                letter-spacing: 1px;
            }
            
            .skybox-presets {
                display: flex;
                flex-wrap: wrap;
                gap: 8px;
            }
            
            .skybox-preset-btn {
                padding: 8px 12px;
                background: #444;
                border: 1px solid #555;
                border-radius: 4px;
                color: white;
                cursor: pointer;
                font-size: 12px;
                transition: all 0.2s;
            }
            
            .skybox-preset-btn:hover {
                background: #555;
                border-color: #667eea;
                transform: translateY(-2px);
            }
            
            .skybox-checkbox {
                display: flex;
                align-items: center;
                gap: 8px;
                color: white;
                cursor: pointer;
                user-select: none;
            }
            
            .skybox-checkbox input[type="checkbox"] {
                width: 16px;
                height: 16px;
                cursor: pointer;
            }
            
            .skybox-control {
                display: flex;
                align-items: center;
                gap: 10px;
                margin-bottom: 10px;
            }
            
            .skybox-control label {
                flex: 0 0 120px;
                color: #aaa;
                font-size: 13px;
            }
            
            .skybox-control input[type="range"] {
                flex: 1;
                height: 4px;
                background: #555;
                border-radius: 2px;
                outline: none;
                -webkit-appearance: none;
            }
            
            .skybox-control input[type="range"]::-webkit-slider-thumb {
                -webkit-appearance: none;
                width: 14px;
                height: 14px;
                background: #667eea;
                border-radius: 50%;
                cursor: pointer;
                transition: all 0.2s;
            }
            
            .skybox-control input[type="range"]::-webkit-slider-thumb:hover {
                background: #764ba2;
                transform: scale(1.2);
            }
            
            .skybox-control .value {
                flex: 0 0 50px;
                text-align: right;
                color: #667eea;
                font-size: 12px;
                font-weight: bold;
            }
            
            .skybox-color-group {
                display: flex;
                flex-direction: column;
                gap: 12px;
            }
            
            .skybox-color-control {
                display: flex;
                align-items: center;
                gap: 10px;
            }
            
            .skybox-color-control label {
                flex: 0 0 80px;
                color: #aaa;
                font-size: 13px;
            }
            
            .skybox-color-control input[type="color"] {
                width: 50px;
                height: 30px;
                border: 1px solid #555;
                border-radius: 4px;
                cursor: pointer;
                background: transparent;
            }
            
            .intensity-input {
                width: 60px;
                padding: 5px;
                background: #333;
                border: 1px solid #555;
                border-radius: 4px;
                color: white;
                font-size: 12px;
            }
            
            .skybox-texture-control {
                display: flex;
                align-items: center;
                gap: 6px;
                margin-bottom: 12px;
            }
            
            .skybox-texture-control label {
                flex: 0 0 100px;
                color: #aaa;
                font-size: 13px;
            }
            
            .skybox-texture-input {
                flex: 1;
                min-width: 0;
                padding: 6px 10px;
                background: rgba(255, 255, 255, 0.05);
                border: 1px solid #555;
                border-radius: 4px;
                color: white;
                font-size: 12px;
                cursor: default;
            }
            
            .skybox-select-texture-btn {
                flex-shrink: 0;
                padding: 6px 12px;
                background: rgba(102, 126, 234, 0.25);
                border: 1px solid rgba(102, 126, 234, 0.5);
                border-radius: 4px;
                color: white;
                font-size: 12px;
                cursor: pointer;
                transition: all 0.2s;
                white-space: nowrap;
                min-width: 50px;
            }
            
            .skybox-select-texture-btn:hover {
                background: rgba(102, 126, 234, 0.4);
                border-color: rgba(102, 126, 234, 0.7);
                transform: translateY(-1px);
            }
            
            .skybox-clear-texture-btn {
                flex-shrink: 0;
                padding: 6px 10px;
                background: rgba(255, 68, 68, 0.25);
                border: 1px solid rgba(255, 68, 68, 0.5);
                border-radius: 4px;
                color: #ff6b6b;
                font-size: 14px;
                font-weight: bold;
                cursor: pointer;
                transition: all 0.2s;
                line-height: 1;
                min-width: 32px;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            
            .skybox-clear-texture-btn:hover {
                background: rgba(255, 68, 68, 0.4);
                border-color: rgba(255, 68, 68, 0.7);
                transform: translateY(-1px);
            }
            
            .skybox-actions {
                display: flex;
                gap: 8px;
            }
            
            .skybox-btn {
                flex: 1;
                padding: 10px;
                background: #444;
                border: 1px solid #555;
                border-radius: 4px;
                color: white;
                cursor: pointer;
                font-size: 12px;
                transition: all 0.2s;
            }
            
            .skybox-btn:hover {
                background: #555;
                border-color: #667eea;
                transform: translateY(-2px);
            }
            
            .skybox-save-status {
                margin-top: 8px;
                padding: 8px;
                border-radius: 4px;
                font-size: 12px;
                text-align: center;
                display: none;
            }
            
            .skybox-save-status.success {
                background: rgba(76, 175, 80, 0.2);
                border: 1px solid rgba(76, 175, 80, 0.5);
                color: #4CAF50;
                display: block;
            }
            
            .skybox-save-status.error {
                background: rgba(244, 67, 54, 0.2);
                border: 1px solid rgba(244, 67, 54, 0.5);
                color: #f44336;
                display: block;
            }
            
            .skybox-save-status.warning {
                background: rgba(255, 152, 0, 0.2);
                border: 1px solid rgba(255, 152, 0, 0.5);
                color: #FF9800;
                display: block;
            }
            
            /* 滚动条样式 */
            .skybox-panel-content::-webkit-scrollbar {
                width: 8px;
            }
            
            .skybox-panel-content::-webkit-scrollbar-track {
                background: #222;
            }
            
            .skybox-panel-content::-webkit-scrollbar-thumb {
                background: #555;
                border-radius: 4px;
            }
            
            .skybox-panel-content::-webkit-scrollbar-thumb:hover {
                background: #667eea;
            }
        `;
    }
}
